import { Component, ElementRef, HostBinding } from '@angular/core';
import { IDoesFilterPassParams, IFilterParams, IHeaderParams } from '@ag-grid-enterprise/all-modules';
import { IFilterAngularComp, IHeaderAngularComp } from '@ag-grid-community/angular';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { deepClone, getO } from '../../../utils/utils';
import { Events } from '@core/services/events/Events';
import { SearchService } from '@core/services/search.service';

interface MyFilterParams extends IFilterParams {
  menuIcon: string;
}

@Component({
  template: `
    <div class="buttonFilter">
      <ng-container *ngFor="let check of list; index as i;">
        <apes-switch [(ngModel)]="check.checked"
                     apesCheckedChildren="{{check.select}}"
                     apesUnCheckedChildren="{{check.unSelect}}" (ngModelChange)="setNode(i, $event)"></apes-switch>
      </ng-container>
    </div>
  `,
  styles: [`
    .buttonFilter {
      text-align: center;
    }

    .buttonHeader-icon {
      cursor: pointer;
    }

  `],
})
export class ButtonFilterComponent implements IFilterAngularComp {
  params!: IFilterParams;
  public showHidden: boolean = false;
  ctx: any = {};
  btnConfig: any = {};
  callback: any;
  icon: any = 'form';

  list : any = []

  year = 'All';

  isFilter = false;
  filterKey = '';

  private elementRef: ElementRef;
  @HostBinding('style.text-align') align: string;
  @HostBinding('style.width') width: string;

  constructor(
    elementRef: ElementRef,
    private expressionService: ExpressionService,
    private event: Events,
    protected searchService: SearchService,
  ) {
    this.elementRef = elementRef;
    this.align = 'left';
    this.width = '100%';
  }

  agInit(params: MyFilterParams): void {
    this.params = params;
    this.ctx = this.params.context;
    if (this.params.hasOwnProperty('colDef')) {
      this.btnConfig = getO(this.params['colDef']['buttonFilter']);
      this.callback = this.params['colDef']['callback'];
    } else {
      this.btnConfig = getO(this.params.column['colDef'].buttonFilter);
      this.callback = this.params.column['colDef'].callback;
    }
    // if (this.btnConfig.hasOwnProperty('icon')) {
    //   this.icon = this.btnConfig.icon;
    // }
    this.initData();
  }

  initData(){
    let btn;
    if(this.btnConfig.action == 'switch'){
      btn = this.btnConfig;
      this.list = deepClone(btn.list);
    }
  }

  isFilterActive(): boolean {
    return this.isFilter;
  }

  doesFilterPass(params: IDoesFilterPassParams): boolean {
    // if(this.filterKey != ''){
      let callbackBody = this.callback;
      let show;
      show = this.expressionService.evaluate(callbackBody, {
        context: this.ctx,
        form: this.ctx['form'],
        model: this.ctx['model'],
        data: params.data,
        event: this.event,
      }, true);
      // return params.data[this.filterKey] ;
    // }
    // return params.data.year >= 2010;
    return show;
  }

  getModel() {}

  setModel(model: any) {
    console.log(model);
  }

  setNode(i, param) {
    let trigger = null;
    // if (this.list[i].trigger) {
    //   trigger = this.expressionService.evaluate(this.list[i].trigger, {
    //     context: this.ctx,
    //     model: this.ctx['model'],
    //     value: param,
    //   }, true);
    // }
    this.isFilter = !param;
    this.updateFilter();
  }


  updateFilter() {
    this.params.filterChangedCallback();
  }

}
